<script setup>
// 引入 api
import { ref } from "vue"

// 内容
const content = ref([])

// 输入框列表
const inputs = ref([{ '1': '' }])

// 点击函数
function btn1() {
    // 添加一个输入框
    const lastObj = inputs.value[inputs.value.length - 1]

    // 新的键的名称
    const newKey = parseInt([Object.keys(lastObj)]) + 1

    inputs.value.push({ [newKey]: '' })

    console.log(inputs.value);
}

function btn2() {
    // 字符串
    content.value = inputs.value
}
</script>

<template>
    <!-- 表单 -->
    <form>
        <template v-for="(input, index) in inputs">
            <input type="text" v-model="input[index + 1]" />
        </template>

        <input type="button" value="添加输入框" @click="btn1">
        <input type="button" value="提交" @click="btn2">
    </form>

    <!-- 渲染 -->
    <p v-for="(item) in content">
        <template v-for="(value, key) in item">
            输入框{{ key }}：
            {{ value }}
        </template>
    </p>
</template>

<style scoped>
input {
    display: block;
}
</style>